<template>

    <div class="data_body">
        <div class="index_nav">
          <ul style="height: 30px; margin-bottom: 0px;">
            <li :class="index1Class" @click="handleTabClick(1)">实时监测</li>
            <li :class="index2Class" @click="handleTabClick(2)">质量管理</li>
            <li :class="index3Class" @click="handleTabClick(3)">费用管理</li>
            <li :class="index4Class" @click="handleTabClick(4)">安全管理</li>
            <li :class="index5Class" @click="handleTabClick(5)">劳务管理</li>
            <li :class="index6Class" @click="handleTabClick(6)">人员管理</li>
          </ul>
          <div class="total_chose_box" v-if="index != 'index1'" style="padding-top: 15px;">
            <div style="height: 32px;"></div>
            <span class="chose_title">请选择年份：</span>
            <select class="year_chose">
              <option>2023</option>
              <option>2022</option>
              <option>2021</option>
              <option>2020</option>
            </select>
            <span class="chose_title">请输入月份：</span>
            <input class="chose_text_in">
            <span class="chose_title">请选择区域：</span>
            <select class="year_chose">
              <option>一标段</option>
              <option>二标段</option>
              <option>三标段</option>
              <option>四标段</option>
              <option>五标段</option>
              <option>六标段</option>
              <option>七标段</option>
              <option>八标段</option>
              <option>九标段</option>
              <option>十标段</option>
            </select>
            <button class="chose_enter">确定</button>
          </div>
          <div class="clear"></div>
        </div>

        <div class="index_tabs">
          <div class="inner" style="height: 109%;" v-if="index == 'index1'">
            <page1></page1>
          </div>
          <div class="inner" v-if="index == 'index2'">
            <page2></page2>
          </div>
          <div class="inner" v-if="index == 'index3'">
            <page3></page3>
          </div>
          <div class="inner" v-if="index == 'index4'">
            <page4></page4>
          </div>
          <div class="inner" v-if="index == 'index5'">
            <page5></page5>
          </div>
          <div class="inner" v-if="index == 'index6'">
            <page6></page6>
          </div>
        </div>
  </div>

</template>

<script>

  import page1 from '@/views/screen/screen2/page1/index';
  import page2 from '@/views/screen/screen2/page2/index';
  import page3 from '@/views/screen/screen2/page3/index';
  import page4 from '@/views/screen/screen2/page4/index';
  import page5 from '@/views/screen/screen2/page5/index';
  import page6 from '@/views/screen/screen2/page6/index';

  export default {
    name: "screen2",
    components: {
      page1,
      page2,
      page3,
      page4,
      page5,
      page6,
    },
    data() {
      return {
        loading: true,
        index: "index1",
        index1Class: "l_left total_chose_pl nav_active",
        index2Class: "l_left total_chose_pl ",
        index3Class: "l_left total_chose_pl ",
        index4Class: "r_right total_chose_pl ",
        index5Class: "r_right total_chose_pl ",
        index6Class: "r_right total_chose_pl ",
      }
    },
    created() {

    },
    mounted() {
      let that = this;
      let timer = setInterval(function () {
        if (document.readyState === 'complete') {
          //你的方法开始
          that.cancelLoading();
          //你的方法结束
          window.clearInterval(timer);
        }
      }, 500);
    },
    methods: {
      cancelLoading() {
        this.loading = false;
      },
      handleTabClick(index) {
        if (index == 1) {
          this.index = "index1";
          this.index1Class = "l_left total_chose_pl nav_active";
          this.index2Class = "l_left total_chose_pl ";
          this.index3Class = "l_left total_chose_pl ";
          this.index4Class = "r_right total_chose_pl ";
          this.index5Class = "r_right total_chose_pl ";
          this.index6Class = "r_right total_chose_pl ";
          console.log("index1");
        } else if (index == 2) {
          this.index = "index2";
          this.index1Class = "l_left total_chose_pl ";
          this.index2Class = "l_left total_chose_pl nav_active";
          this.index3Class = "l_left total_chose_pl ";
          this.index4Class = "r_right total_chose_pl ";
          this.index5Class = "r_right total_chose_pl ";
          this.index6Class = "r_right total_chose_pl ";
          console.log("index2");
        } else if (index == 3) {
          this.index = "index3";
          this.index1Class = "l_left total_chose_pl ";
          this.index2Class = "l_left total_chose_pl ";
          this.index3Class = "l_left total_chose_pl nav_active";
          this.index4Class = "r_right total_chose_pl ";
          this.index5Class = "r_right total_chose_pl ";
          this.index6Class = "r_right total_chose_pl ";
          console.log("index3");
        } else if (index == 4) {
          this.index = "index4";
          this.index1Class = "l_left total_chose_pl ";
          this.index2Class = "l_left total_chose_pl ";
          this.index3Class = "l_left total_chose_pl ";
          this.index4Class = "r_right total_chose_pl nav_active";
          this.index5Class = "r_right total_chose_pl ";
          this.index6Class = "r_right total_chose_pl ";
          console.log("index4");
        } else if (index == 5) {
          this.index = "index5";
          this.index1Class = "l_left total_chose_pl ";
          this.index2Class = "l_left total_chose_pl ";
          this.index3Class = "l_left total_chose_pl ";
          this.index4Class = "r_right total_chose_pl ";
          this.index5Class = "r_right total_chose_pl nav_active";
          this.index6Class = "r_right total_chose_pl ";
          console.log("index5");
        } else if (index == 6) {
          this.index = "index6";
          this.index1Class = "l_left total_chose_pl ";
          this.index2Class = "l_left total_chose_pl ";
          this.index3Class = "l_left total_chose_pl ";
          this.index4Class = "r_right total_chose_pl ";
          this.index5Class = "r_right total_chose_pl ";
          this.index6Class = "r_right total_chose_pl nav_active";
          console.log("index6");
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/assets/screen/screen2/scss/index.scss";
  @import "~@/assets/screen/screen2/scss/common.scss";
  .total_chose_box{
    height: 60px;
  }
</style>
